<template>
    <div class="my_discovery">
        <!--轮播图-->
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
              <img :src="image" width="100%" height="200px"/>
          </van-swipe-item>
        </van-swipe>

        <!--宫格图标-->
        <van-grid :border="false" :column-num="4">
           <van-grid-item v-for="item in gridData" :key="item.id">
                <van-image :src="item.imgUrl" height="40px"/>
                <div class="grid_text">{{ item.text }}</div>
           </van-grid-item>
        </van-grid>

        <!--发现好歌单-->
        <div class="music_list">
            <div class="text">发现好歌单</div>
            <van-button plain round type="default" size="small">
                <span>查看更多</span>
            </van-button>
        </div>

        <!--歌单列表-->
        <van-row :gutter="[20, 20]">
           <van-col span="12" v-for="item in musicList" :key="item.id" @click="toMusicList(item.id)"> 
            <img :src="item.musicImg" alt="" width="100%" height="180px" />
            <div>{{ item.auth }}</div>
           </van-col>
        </van-row>

    </div>
</template>
<script setup>
import {ref} from 'vue'
const gridData = ref([
    {id:1,imgUrl:'http://p1.music.126.net/wLuvpzyPkOPhKA0PFnKCjg==/109951164844665768.jpg?param=140y140',text:"每日推荐"},
    {id:2,imgUrl:'https://p1.music.126.net/J5Gf2W1XSuwOS0gegA9ryA==/109951168645398914.jpg?param=140y140',text:"私人FM"},
    {id:3,imgUrl:'http://p1.music.126.net/4Wu4pjVEyykmHkuidfYuPQ==/109951168608923199.jpg?imageView=1&thumbnail=800y800&enlarge=1%7CimageView=1&watermark&type=1&image=b2JqL3c1bkRrTUtRd3JMRGpEekNtOE9tLzMwMjIyMzg0MTk3LzdlMTAvMjAyMzgxMjA4MTAveDk5MjE2OTM1NzAwODk5NzUucG5n&dx=0&dy=0%7Cwatermark&type=1&image=b2JqL3dvbkRsc0tVd3JMQ2xHakNtOEt4LzI3NjEwNDk3MDYyL2VlOTMvOTIxYS82NjE4LzdhMDc5ZDg0NTYyMDAwZmVkZWJmMjVjYjE4NjhkOWEzLnBuZw==&dx=0&dy=0%7CimageView=1&thumbnail=140y140&?param=140y140',text:"歌单"},
    {id:4,imgUrl:'http://p1.music.126.net/oT-RHuPBJiD7WMoU7WG5Rw==/109951166093489621.jpg?param=150y150',text:"排行榜"},
])

const musicList = ref([
    {id:1,musicImg:'https://p1.music.126.net/rrNg8eNFoGKEnGuas-y39Q==/109951164729307373.jpg?param=200y200',auth:'BTS'},
    {id:2,musicImg:'https://p1.music.126.net/Qo_RNASorLl5xZhxCNou2g==/109951164719041438.jpg?param=200y200',auth:'EXO'},
    {id:3,musicImg:'https://p1.music.126.net/ovm5lyJVkDK9SKHyqDsl4g==/109951164740044996.jpg?param=200y200',auth:'BlackPink'},
    {id:4,musicImg:'https://p1.music.126.net/Bov6NKdazk9XMF82Jk8nqQ==/109951169101244958.jpg?param=200y200',auth:'鹿晗'},
])

const images = [
      'http://p1.music.126.net/jcHNI2bz1ip7zVSpLvgulA==/109951169775548612.jpg?imageView&quality=89',
      'http://p1.music.126.net/6SlGbvXos6JHBiK6VZqPtw==/109951169775552901.jpg?imageView&quality=89',
      'http://p1.music.126.net/74Bw63gPwmipooljadxeqw==/109951169775572561.jpg?imageView&quality=89'
    ];

const toMusicList = (id)=>{
    console.log('跳转歌单详情',id);
}
</script>
<style scoped>
.my_discovery{
    margin-top: 10px;
    padding: 0 10px;
    height: calc(100vh - 110px);
    overflow-y: scroll;
}
.grid_text{
    font-size: 15px;
}
.music_list{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.music_list .text{
    color: #000;
    font-size: 20px;
    font-weight: 600;
}
.music_list span{
    color: #000;
}

</style>
